<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托案例</title>
    <style type="text/css">
        ul li{
            float: left;
            list-style: none;
            width: 100px;
            height: 80px;
            background-color: red;
            text-align: center;
            line-height: 80px;
            border: 1px solid black;
        }
        ul{
            width: 1500px;
            height: 180px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <!--
      事件委托:这个事件自己不做，委托给父元素去做
   -->
  <ul>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
      <li>第四项</li>
      <li>第五项</li>
  </ul>
<script type="text/javascript">
//   var arrs=document.getElementsByTagName("li");
//   console.log(arrs);
//   for (var i=0;i<arrs.length;i++){
//       arrs[i].onclick=function () {
//           alert("被点击了");
//       }
//   }
    document.getElementsByTagName("ul")[0].onclick=function (event) {
        var event=event||window.event;
        //当前事件的目标
        var target=event.target;
        console.log(target);
        //通过事件目标可以获取整个元素
        console.log(target.nodeName);
        if(target.nodeName.toLowerCase()=="li"){
             alert("被点击了");
        }



    }


</script>
</body>
</html>